<template>
    <view>
        <azNavbar navtype="default" customClass="bg-white">
            <template v-slot:header>
                <view class="header" style="width: 100%">
                    <view class="padding-lr-sm flex align-center justify-between" style="height: 100%; width: 100%">
                        <view class="text-bold text-lg">购物车</view>
                        <view v-if="cartStore.cartList.length > 0" @click="cartStore.update">{{ cartStore.isUpdate ? "完成" : "编辑" }}</view>
                    </view>
                </view>
            </template>
        </azNavbar>
        <template v-if="load">
            <template v-if="memberStore.userInfo.username">
                <view v-if="cartStore.cartList.length > 0">
                    <cartItemList />
                    <cartTabBar />
                </view>
                <empty v-else emptyText="购物车空空如也" isHasBtn btnText="去首页逛逛" btnLink="/pages/index/index" />
            </template>
            <template v-else>
                <empty isCheckLogin isHasBtn />
            </template>
        </template>
        <loading v-else />
    </view>
</template>

<script lang="ts" setup>
import azNavbar from "@/components/common/az-navbar.vue";
import empty from "@/components/common/empty.vue";
import loading from "@/components/common/loading.vue";
import cartItemList from "@/components/goods/cart-item-list.vue";
import cartTabBar from "@/components/goods/cart-tab-bar.vue";

import { ref } from "vue";
import { useGetUserinfo } from "@/hooks/getuserinfo";
import { onShow } from "@dcloudio/uni-app";
import { useCartStore } from "@/store/module/cart";
import { useMemberStore } from "@/store/module/member";

const cartStore = useCartStore();
const memberStore = useMemberStore();
const load = ref<boolean>(false);

onShow(async () => {
    await useGetUserinfo();
    load.value = true;
});
</script>

<style lang="scss" scoped></style>
